<template>
<el-card>
    <div slot="header" class="header">
        <div class="search-header">
            <span>线上热门搜索</span> 
            <el-dropdown>
              <span>
                <i class="el-icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="drop">
                <div><el-dropdown-item>黄金糕</el-dropdown-item></div>
                <div><el-dropdown-item>狮子头</el-dropdown-item></div>
                <div><el-dropdown-item>螺蛳粉</el-dropdown-item></div>
                <div><el-dropdown-item>双皮奶</el-dropdown-item></div>
                <div><el-dropdown-item>蚵仔煎</el-dropdown-item></div>
              </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>

    <div class="body">
        <lineChart header="搜索用户数" body1="12321">
            <template>
                <span>
                    17.1<svg t="1696521046257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5687" width="16" height="16"><path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#d81e06" p-id="5688"></path></svg>
                </span>
            </template>
        </lineChart>

        <lineChart header="人均搜索次数" body1="2.7">
            <template>
                <span>
                    2.7<svg t="1696520262440" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4175" width="16" height="16"><path d="M512 597.333333l-170.666667-170.666666h341.333334l-170.666667 170.666666z" p-id="4176" fill="#1afa29"></path></svg>
                </span>
            </template>
        </lineChart>
    </div>
    
    <div class="footer">
         <el-table border
           :data="tableData"
           style="width: 100%">
           <el-table-column
             label="排名"
             type="index"
             width="80">
           </el-table-column>
           <el-table-column
             label="搜索关键字"
             width="180">
           </el-table-column>
           <el-table-column
             label="用户数"
             sortable>
           </el-table-column>
           <el-table-column
             label="周涨幅"
             sortable>
           </el-table-column>
         </el-table>

         <el-pagination class="page" :total="100"  layout="prev,pager,next"></el-pagination>
    </div>

      
</el-card>
</template>

<script>
import lineChart from "./lineChart"
export default {
    //name: '',
    data(){
        return {
            tableData:[{}]
         }
    },
    components:{
        lineChart
    }
}
</script>

<style scoped>
.header{
    border-bottom: 1px solid #dfdddd;
    padding: 0px 0px 10px 0px;
}

.search-header{
    display: flex;
    justify-content: space-between;
}

.drop{
    height: 200px;
    width: 90px;
    padding: 0px 0px 20px 0px;
}

.drop div{
    width: 90px;
    height: 40px;
    font-size: 15px;
}

.body{
    display: flex;
    justify-content: space-around;
}

.page{
    height: 40px;
    float: right;
    margin-top: 10px;
}
</style>
